<#include "./template.ftl">
<#macro head>
    <title><#if vo??>${vo.postTitle}</#if></title>
    <link rel="stylesheet" href="${base}/client/css/detail.css">
    <link rel="stylesheet" href="${base}/client/css/moke.css">
<link rel="stylesheet" href="${base}/client/css/wenda.css">
</#macro>
<#macro content>
        <div id="contents" class="moke-contents">
            <#if vo??>
            <div class="main wrap clearfix">
                <div class="moke-detail-bar">
                    <h1>${vo.postTitle}</h1>
                    <div class="from">
                        <span class="name">来自: ${vo.postAuthorStr}｜${vo.createTimeStr}</span>
                        <span class="view">${vo.view!0}</span>
                        <span class="zan">${vo.guid!0}</span>
                    </div>
                </div>

                <div class="main-left f-l clearfix">
                    <div class="detail-contents moke-detail">
                        <div class="moke-artical">
                            <div class="pic"><img width="100%" src="${base}/system/getImg?imgId=${vo.postImg!''}&w=224"  alt=""></div>
                            ${vo.postContent}
                        </div>
                        <div class="detail-heart">
                            <a title="喜欢就赞一个！" id="favorite" href="javascript:;" data-action="ding" data-id="${vo.id}"
                               class="${done!''}">
                                <i class="fa fa-heart"></i> Like <span class="count">${vo.guid!''}</span>
                            </a>
                        </div>
                        <div class="share f-r">分享至：
                            <span class="social-share" data-initialized="true">
                                <a href="#" class="social-share-icon icon-weibo"></a>
                                <a href="#" class="social-share-icon icon-wechat"></a>
                            </span>
                        </div>
                    </div>
                    <#include "widget/answer.ftl"/>
                </div>

                <div class="main-right f-r clearfix">
                    <div class="moke-right-info">
                        <#if u??>
                            <div class="info">
                                 <dl>
                                     <dt class="f-l"><img width="100%" src="${base}/system/getImg?imgId=${u.photoUrl!''}&w=88" alt=""></dt>
                                     <dd class="f-l">
                                         <h2>${u.username}</h2>
                                         <p>${u.whois!''}</p>
                                     </dd>
                                 </dl>
                                 <ul>
                                     <li><b class="active">${t}篇</b><br>文章数</li>
                                     <li><b class="active">${ct}个</b><br>评论数</li>
                                 </ul>
                             </div>
                        </#if>
                         <div class="news">
                             <h2><span>最新文章</span></h2>
                             <#if ps??>
                                 <ul>
                                     <#list ps as p>
                                     <li><a href="${base}/moke/posts/${p.id}"/>• ${p.postTitle}</a></li>
                                     </#list>
                                 </ul>
                             </#if>
                         </div>
                    </div>
                    <#include "widget/weixin.ftl"/>
                </div>
            </div>
            </#if>
        </div>
</#macro>
<#macro js>
<script type="text/javascript">
    $(document).ready(function () {
        var postLike = function () {
            if ($("#favorite").hasClass('done')) {
                return false;
            } else {
                $("#favorite").addClass('done');
                var id = $("#favorite").data("id"),
                        rateHolder = $("#favorite").children('.count');
                var ajax_data = {
                    id: id
                };
                $.post("${base}/posts/up", ajax_data,
                        function (data) {
                            $(rateHolder).html(data.data);
                        });
                return false;
            }
        };
        $(document).on("click", "#favorite",
                function () {
                    postLike();
                });
    });
</script>
<script>
$(function(){
    

});


window.onload = function() { 
    var obj = $(".moke-right-info");
                            var offsetT = obj.offset().top;
                            var offsetL= obj.offset().left;
                            var objH=obj.height();

                            var leftH=$('.main-left').height();
                            var leftT=$('.main-left').offset().top;

                            var mixT=leftH-objH+leftT-64;

                                $(document).on('scroll',function(){
                                    var scrollT=$(document).scrollTop();
                                    if(scrollT > offsetT-64 && scrollT < mixT ){
                                        obj.css({
                                            width:'320px',
                                            position:'fixed',
                                            top:'84px',
                                            left:offsetL,
                                            right:'auto',
                                            bottom:'auto'
                                        })
                                    }else if(scrollT > mixT){
                                        obj.css({
                                            width:'320px',
                                            position:'absolute',
                                            right:0,
                                            bottom:0,
                                            left:'auto',
                                            top:'auto'
                                        })

                                    }else{
                                        obj.css({
                                            width:'320px',
                                            position:'static'
                                        })
                                    }

                                })
}
</script>
</#macro>
